<template>
    <div>
        <Modal :title="calendarRecordTitle" v-model="calendarRecordModalVisible" :mask-closable='false' @on-cancel="cancel" :width="1100" :styles="{top: '90px'}" :footer-hide="true">
            <div>
                <rui-page :defines="defines">
                    <rui-table :defineId="'calendarRecordInfo'"
                               :slots="[{key:'action',slot:'action'}]"
                               :select="false"
                               @loadDatas="queryInfo"
                               ref="calendarRecordInfoTable">
                        <template slot="action" slot-scope="{ row }">
                            <div>
                                <Button @click="edit(row)" size="small" type="primary">编辑</Button>
                            </div>
                        </template>
                    </rui-table>
                </rui-page>
            </div>
        </Modal>
        <Modal v-model="shopCalendarModal2" draggable scrollable title="编辑" :width="600" style="margin-left: 30px">
            <Form ref="formItem2" :model="formItem2" :label-width="90" :rules="priorityFormValidate2">
                <FormItem label="工作状态" style="margin-top: -10px;" prop="workStatus">
                    <RadioGroup v-model="formItem2.workStatus" @on-change="checkChangeWorkStatus">
                        <Radio label="工作">工作</Radio>
                        <Radio label="休息">休息</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="工作时间" style="margin-top: -10px" prop="amTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                    <TimePicker v-model="formItem2.amTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select am" style="width: 230px"></TimePicker>
                </FormItem>
                <FormItem label="" style="margin-top: -55px;margin-left: 248px" prop="pmTime" :rules="changeTimeRequired?timeCheck:timeValidate">
                    <TimePicker v-model="formItem2.pmTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select pm" style="width: 230px"></TimePicker>
                </FormItem>
                <FormItem label="备注" style="margin-top: -5px;">
                    <Input v-model="formItem2.remarks" type="textarea" :rows="4" placeholder="Enter something..." />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelCalendar">取消</Button>
                <Button type="primary" @click="refer">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    let calendarRecordInfo = [
        {
            key: 'action',
            title: '操作',
            align: 'center',
            minWidth: 155,
            fixed: "left",
        },
        {
            key: 'date',
            title: '日期',
            align: 'center',
            render: (h, params) => {
                if(params.row.workFlagAm === "工作"){
                    return h('span',{
                        'style':{
                            color : '#25992E',
                        }
                    },params.row.date)
                }else{
                    return h('span',{
                        'style':{
                            color : '#ED6D23',
                        }
                    },params.row.date)
                }
            }
        },
        {
            key: 'workFlagAm',
            title: '状态',
            align: 'center',
            render: (h, params) => {
                if(params.row.workFlagAm === "工作"){
                    return h('span',{
                        'style':{
                            color : '#25992E',
                        }
                    },params.row.workFlagAm)
                }else{
                    return h('span',{
                        'style':{
                            color : '#ED6D23',
                        }
                    },params.row.workFlagAm)
                }
            }
        },
        {
            key: 'timeAm',
            title: '上午工作时间',
            align: 'center',
            render: (h, params) => {
                if(params.row.workFlagAm === "工作"){
                    return h('span',{
                        'style':{
                            color : '#25992E',
                        }
                    },params.row.timeAm)
                }else{
                    return h('span',{
                        'style':{
                            color : '#ED6D23',
                        }
                    },params.row.timeAm)
                }
            }
        },
        {
            key: 'timePm',
            title: '下午工作时间',
            align: 'center',
            render: (h, params) => {
                if(params.row.workFlagAm === "工作"){
                    return h('span',{
                        'style':{
                            color : '#25992E',
                        }
                    },params.row.timePm)
                }else{
                    return h('span',{
                        'style':{
                            color : '#ED6D23',
                        }
                    },params.row.timePm)
                }
            }
        },
        {
            key: 'remarks',
            title: '备注',
            align: 'center',
        },
        {
            key: 'createTime',
            title: '创建时间',
            align: 'center',
        },
        {
            key: 'updateTime',
            title: '更新时间',
            align: 'center',
        },
    ];
    import {queryCalenderRecord,updateSeatsDay,queryOpraHolidayInfo} from "@/projects/afs-core-business/api/afs-case/parameter-rules/group";
    export default {
        name: "calendarRecord",
        data() {
            let workStatusValidate = function(rule, value, callback) {
                if (value.length === 0) {
                    return callback("工作状态不能为空")
                }
                return callback();
            };
            let validate = function(rule, value, callback) {
                if (Array.isArray(value)) { //格式为：daterange、datetimerange检测
                    value.map(function (item) {
                        if (item === "") {
                            return callback("日期不能为空")
                        }
                    })
                } else { //格式为：date、datetime、year、month 检测
                    if (value === '') {
                        return callback("日期不能为空")
                    }
                }
                return callback();
            };
            return{
                calendarRecordTitle:"个人日历记录",
                calendarRecordModalVisible:false,
                searchForm:{
                    pageNumber: 1,
                    pageSize: 10,
                    loginName:""
                },
                shopCalendarModal2:false,
                formItem2:{
                    date:"",
                    workStatus:"",
                    amTime:"",
                    pmTime:"",
                    remarks:"",
                    loginName: "",
                },
                priorityFormValidate2:{
                    workStatus:[{required: true,validator: workStatusValidate, trigger: "change"}],
                },
                changeTimeRequired:false,
                timeCheck: [
                    {required: false}
                ],
                timeValidate: [
                    {required: true,validator: validate,trigger: 'change'}
                ],
            }
        },
        methods:{
            calendarRecordMsg: function (msg) {
                if(msg!==""){
                    this.calendarRecordModalVisible = true;
                    this.searchForm.pageNumber = 1;
                    this.searchForm.pageSize = 10;
                    this.searchForm.loginName = msg;
                    this.formItem2.loginName = msg;
                    this.getList();
                }
            },
            getList(){
                queryCalenderRecord(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        let {records, total} = res.data;
                        this.$refs.calendarRecordInfoTable.updateTableData(records, total);
                    }
                })
            },
            queryInfo(pageNumber, pageSize){
                this.searchForm.pageNumber = pageNumber;
                this.searchForm.pageSize = pageSize;
                queryCalenderRecord(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        let {records, total} = res.data;
                        this.$refs.calendarRecordInfoTable.updateTableData(records, total);
                    }
                })
            },
            cancel(){
                this.$refs.calendarRecordInfoTable.resetData();
            },
            edit(v){
                let month = new Date().getMonth()+ 1;
                let time1 = new Date().getFullYear()+"-"+month+"-"+new Date().getDate();
                let time2 = v.date;
                if(Date.parse(time1.trim().replace(/-/g, '/'))>Date.parse(time2.trim().replace(/-/g, '/'))){
                    this.$Message.warning("日期已过期，请重新选择修改！");
                    return;
                }
                // let timeAm = [];
                // timeAm.push(v.timeAm.slice(0, 5));
                // timeAm.push(v.timeAm.slice(6, 11));
                // let timePm = [];
                // timePm.push(v.timePm.slice(0, 5));
                // timePm.push(v.timePm.slice(6, 11));
                // this.formItem2.workStatus = v.workFlagAm;
                // if(this.formItem2.workStatus === "工作"){
                //     this.changeTimeRequired = false;
                // }else{
                //     this.changeTimeRequired = true;
                // }
                // this.formItem2.amTime = timeAm;
                // this.formItem2.pmTime = timePm;
                // this.formItem2.remarks = v.remarks;
                // this.formItem2.date = v.date;
                // this.shopCalendarModal2 = true;
                // this.changeTimeRequired = true;
                this.formItem2.date = v.date;
                this.$refs.formItem2.resetFields();
                this.shopCalendarModal2 = true;
                this.changeTimeRequired = true;
                this.formItem2.remarks = "";
                this.getPersonalInfo();
            },
            //工作状态选择
            checkChangeWorkStatus(v){
                if(v === "工作"){
                    this.changeTimeRequired = false;
                }else{
                    this.changeTimeRequired = true;
                }
            },
            cancelCalendar(){
                this.shopCalendarModal2 = false;
            },
            //提交
            refer(){
                this.$refs.formItem2.validate(valid => {
                    if(valid){
                        updateSeatsDay(this.formItem2).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.shopCalendarModal2 = false;
                                this.getList();
                            }
                        })
                    }
                })
            },
            //查询个人当天日程信息
            getPersonalInfo(){
                queryOpraHolidayInfo(this.formItem2).then(res=>{
                    if(res.code === "0000"){
                        this.formItem2.workStatus = res.data.workFlagAm;
                        let timeAm = [];
                        timeAm.push(res.data.timeAm.slice(0, 5));
                        timeAm.push(res.data.timeAm.slice(6, 11));
                        this.formItem2.amTime = timeAm;
                        let timePm = [];
                        timePm.push(res.data.timePm.slice(0, 5));
                        timePm.push(res.data.timePm.slice(6, 11));
                        this.formItem2.pmTime = timePm;
                        this.formItem2.remarks = res.data.remarks;
                        if(res.data.workFlagAm === "工作"){
                            this.changeTimeRequired = false;
                        }else{
                            this.changeTimeRequired = true;
                        }
                    }
                })
            },
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'calendarRecordInfo',
                        fields: calendarRecordInfo
                    }
                ]
            }
        }
    }
</script>

